<template>
  <div class="wh_auto" ref="scrollRef" @scroll="handleScrollerFun">
    <HomeTtitle :scroll-top="scrollTop"></HomeTtitle>
    <HomeBrand class="home_brand" id="home_brand"></HomeBrand>
    <!-- <HomeClue class="home_clue" id="home_clue" /> -->
    <HomeMatrix class="home_matrix" id="home_matrix"></HomeMatrix>
    <HomeMarke class="home_marke" id="home_marke" />
    <HomePlatform class="home_platform" id="home_introduction" />
    <HomeIntroduction class="home_introduction" id="home_introduction" />
    <HomePhone class="home_phone" id="home_phone" />
    <HomeInfo class="home_info" id="home_info" />
  </div>
</template>
<script setup lang="ts">
  import { defineAsyncComponent, ref } from 'vue'
  const HomeTtitle = defineAsyncComponent(() => import('@/components/HomeTtitle.vue'))
  const HomeMatrix = defineAsyncComponent(() => import('@/components/HomeMatrix.vue'))
  const HomeBrand = defineAsyncComponent(() => import('@/components/HomeBrand.vue'))
  // const HomeClue = defineAsyncComponent(() => import('@/components/HomeClue.vue'))
  const HomeMarke = defineAsyncComponent(() => import('@/components/HomeMarke.vue'))
  const HomePlatform = defineAsyncComponent(() => import('@/components/HomePlatform.vue'))
  const HomeIntroduction = defineAsyncComponent(() => import('@/components/HomeIntroduction.vue'))
  const HomePhone = defineAsyncComponent(() => import('@/components/HomePhone.vue'))
  const HomeInfo = defineAsyncComponent(() => import('@/components/HomeInfo.vue'))
  const scrollTop = ref<number>(0)
  const scrollRef = ref()
  const handleScrollerFun = () => {
    scrollTop.value = scrollRef.value.scrollTop
  }
</script>
<style scoped lang="less">
  .home_swiper,
  .home_brand {
    overflow: hidden;
  }

  .mobile_swiper {
    margin-top: 65px;
    height: 250px;
  }

  .home_clue {
    margin-top: 29px;
  }

  .home_phone {
    // padding:0 60px;
  }
  .home_platform {
    margin-top: 68px;
  }

  .home_info {
    margin-top: 50px;
  }
  @media (max-width: 768px) {
    .home_swiper,
    .home_brand {
      overflow: hidden;
    }

    .mobile_swiper {
      margin-top: 65px;
      height: 250px;
    }

    .home_clue {
      margin-top: 29px;
    }

    .home_phone {
      // padding:0 60px;
    }
    .home_platform {
      margin-top: 68px;
    }

    .home_info {
      margin-top: 50px;
    }
  }
</style>
